<script setup lang='ts'>
import { ref } from 'vue'
import { shortcuts, disabledDate } from '../../../utils/time'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reqCreateStoryByProjectId, reqGetAllParentStoryByProjectId } from '../../../apis/story/index'
import { useRoute } from 'vue-router'
import { reqGetAllMemberProjectById } from '../../../apis/project/index'
import { onMounted } from 'vue'
import useUserStore from '../../../store/modules/user'
import { watch } from 'vue'
import type { ProjectMember } from '../../../apis/project/type'
import type { ParentStory } from '../../../apis/story/type'

const useUser = useUserStore()
let $route = useRoute()
const dialogVisible = defineModel('dialogVisible')
const memberList = ref<ProjectMember[]>([])
const projectId = ref<number | null>(Number($route.params.id) ? Number($route.params.id) : null)
const parentStoryList = ref<ParentStory[]>([])
const emit = defineEmits(['refresh'])
const priorityOptions = [
  {
    value: 'high',
    label: '高'
  },
  {
    value: 'medium',
    label: '中'
  },
  {
    value: 'low',
    label: '低'
  }
]
const typeOptions = [
  {
    value: 'requirement',
    label: '需求'
  },
  {
    value: 'bug',
    label: '缺陷'
  }
]
const formValue = ref({
  id: '',
  type: '',
  status: null,
  priority: '',
  handler: [],
  parentId: undefined,
  endsAt: '',
  title: '',
  description: '',
  createTime: ''
})


const rules = {
  type: [{ required: true, message: '请选择类型', trigger: 'change' }],
  priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  description: [{ required: true, message: '请输入内容', trigger: 'blur' }],
}

const formRef = ref()

const handlerAddStory = async () => {
  await formRef.value.validate((valid: any) => {
    if (!valid) return

    if ($route.name === 'mywork' && !projectId.value) {
      ElMessage.warning('请选择项目空间!')
    } else {
      ElMessageBox.confirm(`确认创建需求 ${formValue.value.title} 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        const res = await reqCreateStoryByProjectId(projectId.value as number, {
          title: formValue.value.title,
          description: formValue.value.description,
          priority: formValue.value.priority,
          versionId: null,
          parentId: formValue.value.parentId,
          endsAt: formValue.value.endsAt || null,
          type: formValue.value.type,
          assigneeIds: formValue.value.handler
        })
        if (res.code === 200) {
          emit('refresh')
          ElMessage.success('创建成功')
          handlerClean()
        }
      })
    }
  })
}

const getMemberList = async () => {
  const res = await reqGetAllMemberProjectById(projectId.value as number)
  if (res.code === 200) {
    memberList.value = res.data
  }
}
const handlerClean = () => {
  dialogVisible.value = false
  Object.assign(formValue.value, {
    id: '',
    type: '',
    status: null,
    priority: null,
    handler: [],
    parentId: undefined,
    endsAt: '',
    title: '',
    description: '',
    createTime: ''
  })
}

const getAllParentStory = async () => {
  const res = await reqGetAllParentStoryByProjectId(projectId.value as number, formValue.value.type)
  if (res.code === 200) {
    parentStoryList.value = res.data
  }
}

onMounted(() => {
  getMemberList()
  // getAllParentStory()
})

watch(projectId, newVal => {
  if (newVal) {
    getMemberList()
    getAllParentStory()
  }
})

watch(() => formValue.value.type, newVal => {
  if (newVal) {
    getAllParentStory()
  }
})
</script>


<template>
  <el-dialog v-model="dialogVisible" width="800" align-center :model=false draggable style="padding: 30px;"
    @close="handlerClean">
    <template #header>
      <p style="font-size: 24px;font-weight: 600;">新建待办事项</p>
    </template>
    <template #default>
      <el-form :inline="true" :model="formValue" :rules="rules" ref="formRef">
        <el-row>
          <el-col :span="8">
            <el-form-item prop="type">
              <template #label>
                <svg t="1743130414010" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2033" width="16" height="16">
                  <path
                    d="M516.8 441.3h324.6c11.3 0 20.5 9.2 20.5 20.5s-9.2 20.5-20.5 20.5H516.8c-11.3 0-20.5-9.2-20.5-20.5s9.2-20.5 20.5-20.5zM516.8 605.1h324.6c11.3 0 20.5 9.2 20.5 20.5s-9.2 20.5-20.5 20.5H516.8c-11.3 0-20.5-9.2-20.5-20.5 0-11.4 9.2-20.5 20.5-20.5zM516.8 768.8h324.6c11.3 0 20.5 9.2 20.5 20.5s-9.2 20.5-20.5 20.5H516.8c-11.3 0-20.5-9.2-20.5-20.5s9.2-20.5 20.5-20.5z"
                    fill="#999999" p-id="2034"></path>
                  <path
                    d="M411.3 504.3H206.6c-12.2 0-22-9.9-22-22V277.6c0-12.1 9.8-22 22-22h204.7c12.2 0 22 9.9 22 22v204.6c0 12.2-9.8 22.1-22 22.1z m-182.7-44h160.7V299.6H228.6v160.7zM411.3 831.7H206.6c-12.2 0-22-9.9-22-22V605.1c0-12.1 9.8-22 22-22h204.7c12.2 0 22 9.9 22 22v204.7c0 12.1-9.8 21.9-22 21.9z m-182.7-44h160.7V627.1H228.6v160.6z"
                    fill="#999999" p-id="2035"></path>
                  <path
                    d="M516.8 277.6h324.6c11.3 0 20.5 9.2 20.5 20.5s-9.2 20.5-20.5 20.5H516.8c-11.3 0-20.5-9.2-20.5-20.5s9.2-20.5 20.5-20.5z"
                    fill="#999999" p-id="2036"></path>
                </svg>
                <p>类型:</p>
              </template>
              <el-select v-model="formValue.type" placeholder="请选择类型" size="small"
                style="width: 130px;margin-right: 10px;">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="priority">
              <template #label>
                <svg t="1743131639562" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2319" width="16" height="16">
                  <path
                    d="M741.504 485.824h-242.56c-11.456 0-20.736 10.688-20.736 24 0 13.248 9.28 24 20.736 24h242.56c11.392 0 20.672-10.752 20.672-24s-9.28-24-20.672-24zM843.904 339.328h-344.96c-11.456 0-20.736 10.752-20.736 24s9.28 24 20.736 24h344.832c11.52 0 20.672-10.752 20.672-24s-9.216-24-20.544-24zM680.064 632.384h-181.12c-11.456 0-20.736 10.688-20.736 24 0 13.248 9.28 24 20.736 24h181.12c11.456 0 20.672-10.752 20.672-24 0-13.312-9.216-24-20.672-24zM608.448 768.512h-109.44c-11.456 0-20.736 10.816-20.736 24 0 13.312 9.28 24 20.736 24h109.44c11.456 0 20.672-10.688 20.672-24 0-13.184-9.216-24-20.672-24zM307.392 198.464L172.864 351.168h113.92v482.816h41.6V351.168h113.6L307.392 198.464z"
                    fill="#999999" p-id="2320"></path>
                </svg>
                <span>优先级: </span>
              </template>
              <el-select v-model="formValue.priority" placeholder="请选择优先级" size="small"
                style="width: 130px;margin-right: 10px;">
                <el-option v-for="item in priorityOptions" :key="item" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="$route.name === 'mywork'">
            <el-form-item>
              <template #label>
                <svg t="1743130414010" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2033" width="16" height="16">
                  <path
                    d="M516.8 441.3h324.6c11.3 0 20.5 9.2 20.5 20.5s-9.2 20.5-20.5 20.5H516.8c-11.3 0-20.5-9.2-20.5-20.5s9.2-20.5 20.5-20.5zM516.8 605.1h324.6c11.3 0 20.5 9.2 20.5 20.5s-9.2 20.5-20.5 20.5H516.8c-11.3 0-20.5-9.2-20.5-20.5 0-11.4 9.2-20.5 20.5-20.5zM516.8 768.8h324.6c11.3 0 20.5 9.2 20.5 20.5s-9.2 20.5-20.5 20.5H516.8c-11.3 0-20.5-9.2-20.5-20.5s9.2-20.5 20.5-20.5z"
                    fill="#999999" p-id="2034"></path>
                  <path
                    d="M411.3 504.3H206.6c-12.2 0-22-9.9-22-22V277.6c0-12.1 9.8-22 22-22h204.7c12.2 0 22 9.9 22 22v204.6c0 12.2-9.8 22.1-22 22.1z m-182.7-44h160.7V299.6H228.6v160.7zM411.3 831.7H206.6c-12.2 0-22-9.9-22-22V605.1c0-12.1 9.8-22 22-22h204.7c12.2 0 22 9.9 22 22v204.7c0 12.1-9.8 21.9-22 21.9z m-182.7-44h160.7V627.1H228.6v160.6z"
                    fill="#999999" p-id="2035"></path>
                  <path
                    d="M516.8 277.6h324.6c11.3 0 20.5 9.2 20.5 20.5s-9.2 20.5-20.5 20.5H516.8c-11.3 0-20.5-9.2-20.5-20.5s9.2-20.5 20.5-20.5z"
                    fill="#999999" p-id="2036"></path>
                </svg>
                <p>空间:</p>
              </template>
              <el-select v-model="projectId" :placeholder="formValue.type ? '请选择所属空间' : '请先选择类型'" size="small"
                style="width: 130px;margin-right: 10px;" :disabled="!formValue.type">
                <el-option v-for="item in useUser.projectData" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <template #label>
                <svg t="1742979143025" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="3424" width="16" height="16">
                  <path
                    d="M511.4 482.7c104.9 0 189.2-85.2 189.2-189.2 0-104-84.4-190.1-189.2-190.1-104.9 0-189.2 85.2-189.2 190.1 0 104.8 84.4 189.2 189.2 189.2z m0-330.2c77.8 0 140.1 63.1 140.1 140.1s-62.3 140.9-140.1 140.9-140.1-63.1-140.1-140.1c0.1-77 62.3-140.9 140.1-140.9z m0 383.4c-197.4 0-358 160.6-358 358.8 0 13.9 10.6 24.6 24.6 24.6 13.9 0 24.6-10.6 24.6-24.6C202.6 724.3 341 585 511.4 585s308.8 139.3 308.8 309.7c0 13.9 10.6 24.6 24.6 24.6 13.9 0 24.6-10.6 24.6-24.6 0-198.2-160.5-358.8-358-358.8z m0 0"
                    fill="#999999" p-id="3425"></path>
                </svg>
                <p style="margin-right: 5px;">处理人:</p>
              </template>
              <el-select v-model="formValue.handler" size="small" multiple collapse-tags collapse-tags-tooltip
                placeholder="请选择处理人" style="width: 130px;margin-right: 10px;" clearable>
                <el-option v-for="item in memberList" :key="item.id" :label="item.username" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <template #label>
                <svg t="1745203269507" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="5051" id="mx_n_1745203269508" width="16" height="16">
                  <path
                    d="M762.24 86.4a76.8 76.8 0 0 1 76.8 76.8v261.888a76.8 76.8 0 0 1-76.8 76.8H311.68v222.08l97.472-0.064v-59.968A76.8 76.8 0 0 1 478.08 587.52l7.872-0.384h405.184a76.8 76.8 0 0 1 76.8 76.8v196.864a76.8 76.8 0 0 1-76.8 76.8H485.952a76.8 76.8 0 0 1-76.8-76.8v-60.096l-97.472 0.064a76.8 76.8 0 0 1-76.416-68.928l-0.384-7.872v-222.08H132.864A76.8 76.8 0 0 1 56.448 432.96l-0.384-7.872V163.2a76.8 76.8 0 0 1 76.8-76.8z m128.896 577.536H485.952v85.632a38.336 38.336 0 0 1 0 25.6v85.632h405.184v-196.864zM132.864 163.2v261.888h629.376V163.2H132.864z"
                    fill="#999999" p-id="5052"></path>
                </svg>
                <p>父需求:</p>
              </template>
              <el-select v-model="formValue.parentId" placeholder="请选择父需求" size="small"
                style="width: 130px;margin-right: 10px;" clearable>
                <el-option v-for="item in parentStoryList" :key="item.id" :label="item.title" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <template #label>
                <svg t="1742979188747" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="5414" width="16" height="16">
                  <path
                    d="M128 213.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h768a42.666667 42.666667 0 0 0 42.666667-42.666667V256a42.666667 42.666667 0 0 0-42.666667-42.666667H128z m0-42.666666h768a85.333333 85.333333 0 0 1 85.333333 85.333333v597.333333a85.333333 85.333333 0 0 1-85.333333 85.333334H128a85.333333 85.333333 0 0 1-85.333333-85.333334V256a85.333333 85.333333 0 0 1 85.333333-85.333333z"
                    fill="#999999" p-id="5415"></path>
                  <path
                    d="M42.666667 384m21.333333 0l896 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333334l-896 0q-21.333333 0-21.333333-21.333334l0 0q0-21.333333 21.333333-21.333333Z"
                    fill="#999999" p-id="5416"></path>
                  <path
                    d="M170.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                    fill="#999999" p-id="5417"></path>
                  <path
                    d="M426.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                    fill="#999999" p-id="5418"></path>
                  <path
                    d="M682.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                    fill="#999999" p-id="5419"></path>
                  <path
                    d="M170.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                    fill="#999999" p-id="5420"></path>
                  <path
                    d="M426.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                    fill="#999999" p-id="5421"></path>
                  <path
                    d="M682.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                    fill="#999999" p-id="5422"></path>
                  <path
                    d="M256 85.333333m21.333333 0l0 0q21.333333 0 21.333334 21.333334l0 170.666666q0 21.333333-21.333334 21.333334l0 0q-21.333333 0-21.333333-21.333334l0-170.666666q0-21.333333 21.333333-21.333334Z"
                    fill="#999999" p-id="5423"></path>
                  <path
                    d="M725.333333 85.333333m21.333334 0l0 0q21.333333 0 21.333333 21.333334l0 170.666666q0 21.333333-21.333333 21.333334l0 0q-21.333333 0-21.333334-21.333334l0-170.666666q0-21.333333 21.333334-21.333334Z"
                    fill="#999999" p-id="5424"></path>
                </svg>
                <p style="margin: 0 5px 0 3px;">结束日期:</p>
              </template>
              <el-date-picker v-model="formValue.endsAt" type="date" placeholder="Pick a day"
                :disabled-date="disabledDate" :shortcuts="shortcuts" size="small" style="width: 130px;" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="title" style="width: 100%;">
              <el-input v-model="formValue.title" clearable placeholder="请输入标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="description" style="width: 100%;">
              <el-input v-model="formValue.description" type="textarea" placeholder="请输入内容" rows="10"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handlerAddStory">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>


<style scoped lang='scss'>
// :deep(.el-col) {
//   height: 40px;
//   line-height: 40px;
// }

.icon {
  margin-top: 8px;
}
</style>
